<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>抽奖</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/chou_jiang.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		
		<div class="Box">
			<!--头部-->
			<header>
				<img src="img/cj_top.png"/>
				<div class="info">
					<div class="zuo">
						<img src="img/cj_shuoming.png"/>
					</div>
					<!--规则说明-->
					<div class="gz_info gz_ani">
						<div class="close">
							<img src="img/close.png"/>
						</div>
						<h4>规则说明</h4>
						<ul>
							<li>
								<p>1.每个ID只有1次抽奖机会，100%中奖。</p>
							</li>
							<li>
								<p>2.中奖后，请与哔帮小秘书联系，告知奖品收货地址，我们将会在活动结束48小时内送出。</p>
							</li>
							<li>
								<p>3.所有奖品免费领取，奖品的快速由消费者承担，如果没有与小秘书特别说明，我们默认以顺丰到付的形式寄出。</p>
							</li>
						</ul>
						
						<p>活动最终解析权归广州顺代邦网络科技有限公司所有</p>
						<div class="sm_logo">
							<img src="img/sm_logo.png"/>
						</div>
					</div>
					<!--兑奖-->
					<div id="dui_jiang" class="dui_jiang">
						<div class="close">
							<img src="img/close.png"/>
						</div>
						
						<h5>恭喜您抽到</h5>
						<h5>请与哔帮小秘书联系, 核实收货地址</h5>
						
						<div class="erWei"></div>
						
						<p>小秘书二维码</p>
						
						<div class="sm_logo">
							<img src="img/sm_logo.png"/>
						</div>
					</div>
					
					<div class="you anim">
						<audio id="music" loop="loop" autoplay="" src="music/Children´s Christmas Favorites - Jingle Bells (Album Version) 00_00_04-00_00_41.mp3"></audio>
						<label for="music"><img src="img/cj_music.png"/></label>
					</div>
				</div>
			</header>
			<!--抽奖环节-->
			<section>
				<!--中奖页面-->
				<div class="cj_bg">
					<div class="gong_xi">
						<img src="img/zhong_jiang.png"/>
					</div>
					<div class="big_btn">
						<div class="btn_tj">
							<img src="img/tui_jiang.png"/>
						</div>
					</div>
				</div>
				
				<!--抽奖-->
				<ul>
					<li class="xue_hua">
						<div class="xue_hua_bg">
							<div class="li_info">
								<p>法国</p>
								<p>Gucci</p>
								<p>提花羊毛围巾</p>
								<p>价值1815元</p>
							</div>
						</div>
					</li>
					<li class="li_wu">
						<div class="li_wu_bg">
							<div class="li_info li-2">
								<p>泰国</p>
								<p>优必思乳胶枕</p>
								<p>价值488元</p>
							</div>
						</div>
					</li>
					<li class="xue_hua">
						<div class="xue_hua_bg">
							<div class="li_info li-3">
								<p>哔帮</p>
								<p>APP优惠券</p>
								<p>价值50元</p>
							</div>
						</div>
					</li>
					<li class="li_wu">
						<div class="li_wu_bg">
							<div class="li_info li-4">
								<p>日本</p>
								<p>啾啾奶瓶</p>
								<p>价值65元</p>
							</div>
						</div>
					</li>
					
					<!--开始按钮-->
					<div class="action">
						<div class="kai_shi sta_ani">
							<img src="img/action.png"/>
						</div>
					</div>
					
					<li class="li_wu">
						<div class="li_wu_bg">
							<div class="li_info li-5">
								<p>泰国</p>
								<p>芙丽滋套餐4包</p>
								<p>价值128元</p>
							</div>
						</div>
					</li>
					<li class="xue_hua">
						<div class="xue_hua_bg">
							<div class="li_info li-6">
								<p>日本</p>
								<p>小林制药退热贴</p>
								<p>价值55元</p>
							</div>
						</div>
					</li>
					<li class="li_wu">
						<div class="li_wu_bg">
							<div class="li_info li-7">
								<p>韩国</p>
								<p>艾欧珠面膜</p>
								<p>价值88元</p>
							</div>
						</div>
					</li>
					<li class="xue_hua">
						<div class="xue_hua_bg">
							<div class="li_info li-8">
								<p>日本</p>
								<p>鮭鱼干细胞精华</p>
								<p>价值1430元</p>
							</div>
						</div>
					</li>
				</ul>
			</section>
			
		</div>
		
	
	
		
	</body>
	
	<!--rem-->
	<script>document.body.style.height  = window.innerHeight+"px";</script>
	<script type="text/javascript">
		/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				//字体大小=1个rem单位表示多少个像素*(设备的宽度/设计宽度)
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
	</script>
	<!--九宫格抽奖-->
	<script type="text/javascript" src="js/index.js"></script>
</html>
